<template>
  <div id="hot_cake">
    <!-- banner -->
    <div class="banner flex-row-c-c">
      <h1>美味蛋糕</h1>
    </div>
    <section class="hot_cakeList">
      <ul class="flex-row-sb-c hot_cake_row">
        <li class="cake_item" v-for="(item, index) in cakeRow" :key="item.src">
          <div class="gray_box bg_gray flex-row-c-c">
            <div class="recommend" v-if="index <= 3"></div>
            <img class="cake_pic" :src="item.src" :title="item.title" />
          </div>
          <div class="default_bottom">
            <h2 class="cake_title">{{ item.title || '' }}</h2>
            <p class="cake_desc">{{ item.desc || '' }}</p>
            <p class="cake_price">{{ item.price || '' }}</p>
          </div>
          <div class="hover_effect flex-row-sb-c">
            <div class="effect_left flex-col-c-c">
              <img v-if="qrcodes[index]" :src="qrcodes[index]" />
              <div>微信扫码购买</div>
            </div>
            <div class="effect_right">
              <h2 class="cake_title">{{ item.title || '' }}</h2>
              <p class="cake_desc">{{ item.desc || '' }}</p>
              <p class="cake_price">{{ item.price || '' }}</p>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script lang="ts">
import {
  cake1,cake2,cake3,cake4,cake5,cake6,cake7,cake8,cake9,cake10,cake11,cake12,
  cakeUrlList
  } from '@/const/image.ts'
import QRCode from 'qrcode'

export default {
  head() {
    return {
      meta: [{
        hid: 'keywords',
        name: 'keywords',
        content: '熊猫不走、生日蛋糕、熊猫跳舞、水果蛋糕、慕斯蛋糕、奶油蛋糕、芝士蛋糕、动物奶油鲜果蛋糕；四大天王、四大美人、小公主、小王子、欢乐果园、幸福满满、榴莲千层'
      }]
    }
  },
  setup() {
    let qrcodes = reactive([])
    cakeUrlList.forEach((item, index) => {
      QRCode.toDataURL(item, {}, (error, url) => {
        qrcodes[index] = url
      })
    });

    const cakeRow = ref([
      {
        src: cake1,
        title: '四大天王',
        desc: '动物奶油鲜果蛋糕',
        price: '￥199 / 约7号',
      },
      {
        src: cake2,
        title: '四大美人',
        desc: '慕斯蛋糕',
        price: '￥209 / 约7号',
      },
      {
        src: cake3,
        title: '小公主',
        desc: '动物奶油鲜果蛋糕',
        price: '￥189 / 约6号',
      },
      {
        src: cake4,
        title: '小王子',
        desc: '动物奶油鲜果蛋糕',
        price: '￥189 / 约6号',
      },
      {
        src: cake5,
        title: '欢乐果园',
        desc: '动物奶油鲜果蛋糕',
        price: '￥209 / 约8号',
      },
      {
        src: cake6,
        title: '幸福满满',
        desc: '动物奶油鲜果蛋糕',
        price: '￥189 / 约6号',
      },
      {
        src: cake7,
        title: '椰椰椰',
        desc: '动物奶油鲜果蛋糕',
        price: '￥179 / 约7号',
      },
      {
        src: cake8,
        title: '榴莲千层',
        desc: '动物奶油鲜果蛋糕',
        price: '￥179 / 约8号',
      },
      {
        src: cake9,
        title: '玫瑰爱神',
        desc: '动物奶油鲜果蛋糕',
        price: '￥279 / 约8号',
      },
      {
        src: cake10,
        title: '一夜暴富',
        desc: '慕斯蛋糕',
        price: '￥249 / 约7号',
      },
      {
        src: cake11,
        title: '幸运锦鲤',
        desc: '动物奶油鲜果蛋糕',
        price: '￥189 / 约6号',
      },
      {
        src: cake12,
        title: '鲜果多多',
        desc: '动物奶油鲜果蛋糕',
        price: '￥189 / 约6号',
      },
    ])
    return {
      cakeRow,
      qrcodes,
    }
  },
}
</script>

<style lang="scss" scoped>
#hot_cake {
  background-color: white;
  padding-bottom: 132px;
  .banner {
    width: 100%;
    height: 306px;
    background: url('@/assets/images/hot_cake_banner.png') no-repeat;
    background-size: cover;
    h1 {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 600;
      font-size: 50px;
      color: white;
    }
  }
  .hot_cakeList {
    margin: 50px auto 0;
    h1 {
      font: 400 50px 'PingFang SC';
      margin-bottom: 100px;
      text-align: center;
    }
    .hot_cake_row {
      width: 1200px;
      height: 1272px;
      margin: 0 auto 36px;
      flex-wrap: wrap;
      .cake_item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 300px;
        height: 424px;
        border: 1px solid #f5f5f5;
        padding: 20px 20px 0;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          .hover_effect {
            transform: translateX(300px);
            transition: all 0.5s;
            transition-delay: 0.1s;
            background-color: white;
            z-index: 9;
            .effect_right {
              width: 100%;
              height: 100%;
              padding: 10px 0 0px 0;
              .cake_title {
                font: 400 16px 'PingFang SC';
              }
              .cake_desc {
                font: 400 12px 'Inter';
                color: #666;
                margin: 4px auto 19px;
                width: 134px;
                text-overflow :ellipsis;
                flex-wrap: wrap;
                overflow: hidden;
              }
            }
          }
          .default_bottom {
            transition: all 0.3s;
            opacity: 0;
          }
        }
        .bg_gray {
          background-color: #f3f3f3;
        }
        .gray_box {
          position: relative;
          min-width: 260px;
          max-width: 260px;
          min-height: 260px;
          max-height: 260px;
          .recommend {
            position: absolute;
            top: 16px;
            left: 0;
            width: 63px;
            height: 27px;
            background: url('@/assets/images/recommend.png') no-repeat;
            background-size: contain;
          }
          .cake_pic {
            width: 100%;
            height: 100%;
          }
        }
        .default_bottom {
          width: 100%;
          height: 146px;
          padding-top: 8px;
          .cake_title {
            font: 400 16px 'PingFang SC';
          }
          .cake_desc {
            font: 400 12px 'Inter';
            color: #666;
            margin: 4px auto 19px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .cake_price {
            font: 400 23px 'SF Pro Display';
          }
        }
        .hover_effect {
          position: absolute;
          bottom: -4px;
          left: -300px;
          width: 100%;
          height: 142px;
          padding: 0 8px 4px 0;
          .effect_left {
            padding-left: 19px;
            img {
              width: 97px;
              height: 97px;
              min-width: 97px;
              min-height: 97px;
              margin-bottom: 4px;
            }
            div {
              font: 400 14px 'PingFang SC';
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          .effect_right {
            width: 100%;
            height: 100%;
            .cake_title {
              font: 400 16px 'PingFang SC';
            }
            .cake_desc {
              font: 400 12px 'Inter';
              color: #666;
              margin: 4px auto 19px;
            }
            .cake_price {
              font: 400 23px 'SF Pro Display';
            }
          }
        }
      }
    }
  }
}
</style>
